<template>
    <div class="userInfoBox">
        <header-footer :commonData="{$parent:userInfoData.$parent,indexLogo:userInfoData.indexLogo}">
            <div class="task_crumb index_width">
                <ul>
                    <li class="f_left">当前位置：</li>
                    <li class="f_left">
                        <router-link to="/index">首页></router-link>
                    </li>
                    <li class="f_left">
                        <router-link to="javascript:void(0)">用户中心</router-link>
                    </li>
                </ul>
            </div>
            <div class="user_main mainToBottom index_width">
                <div id="userLeft" class="user_main_left f_left" :style="{height:userInfoData.userLeftHeight}">
                    <div class="user_left_userinfo">
                        <img class="user_header_tou" src="/static/img/user/userTou.png"/>
                        <span class="user_username color333">用户名：{{String.isEmptyOrNUll(userInfoData.$parent.loginInfo.realName)?userInfoData.$parent.loginInfo.userName:userInfoData.$parent.loginInfo.realName}}</span>
                    </div>
                    <div class="user_item text_center" v-cloak>
                        <ul>
                            <li v-for="(item,index) in userLists" :key="index" :class="{user_item_li_active:userInfoData.userItemIndex==index}">
                                <router-link :to="item.url">
                                    <span class="userItemSpan"><img :src="item.img"></span>
                                    <span>{{item.title}}</span>
                                </router-link>
                            </li>

                        </ul>
                    </div>
                </div>
                <slot></slot>
                <div class="clear"></div>
            </div>


        </header-footer>
    </div>
</template>

<script>
    var _this;
    import headerFooter from "@/components/header_and_footer.vue"
    export default {
        props: ["userInfoData"],
        data: function() {
            return {
                indexItem: 0,
                userLists: [{
                        title: "个人信息",
                        url: "/user_info",
                        img: "/static/img/user/user_icon_user.png"
                    },
                    {
                        title: "报名信息",
                        url: "/user/apply_info",
                        img: "/static/img/user/user_icon_apply.png"
                    },
                    {
                        title: "下载中心",
                        url: "/user/download",
                        img: "/static/img/user/mineTelephone.png"
                    },
                    {
                        title: "业务中心",
                        url: "/user/business_center",
                        img: "/static/img/user/user_icon_listen_cert.png"
                    },
                    // {
                    //     title: "我的证书",
                    //     url: "/user/my_certificate",
                    //     img: "/static/img/user/user_icon_cert_info.png"
                    // },
                    {
                        title: "发票模板",
                        url: "/user/ticketManage",
                        img: "/static/img/user/user_icon_listen_cert.png"
                    },
                    {
                        title: "修改密码",
                        url: "/user/modify_pwd",
                        img: "/static/img/user/user_icon_update.png"
                    },
                    {
                        title: "更换手机",
                        url: "/user/update_phone",
                        img: "/static/img/user/mineTelephone.png"
                    },
                    {
                        title: "在线反馈",
                        url: "/user/feedback",
                        img: "/static/img/user/user_feedback.png"
                    },
                ]
            }
        },
        beforeCreate:function(){
            _this=this;
        },
        mounted: function() {

        },
        methods: {
            loginOut: function() {
                this.common.post(this.api.loginOut, {}, function(res) {});
                this.$cookies.remove('loginInfo');
                this.$cookies.remove('token');
                localStorage.clear();
                this.common.toPage("/login");
            }
        },
        components: {
            headerFooter
        }
    }
</script>

<style scoped="scoped">
    .index_width,
    .header {
        width: 1150px;
    }

    .header_shadow {
        background: #0b67d0;
    }
    /* .header_out_img {
        background-image: url(../../static/img/index/out_header_icon_b.png);
    } */
    .userInfoBox .header{
        width: 1150px!important;
    }
</style>
